<template>
  <main
    class="w-screen h-screen flex flex-col items-center gap-5 p-5 py-10 overflow-y-scroll no-scrollbar rounded-md"
  >
    <h2 class="text-gray-50 text-center text-sm opacity-70">参数设置</h2>
    <el-select v-model="config.deviceId" placeholder="选择摄像头" clearable filterable>
      <el-option
        v-for="item in cameras"
        :key="item.deviceId"
        :label="item.label"
        :value="item.deviceId"
      />
    </el-select>
    <el-input v-model="config.borderWidth" placeholder="边框宽度(单位px)" clearable />
    <el-input v-model="config.borderColor" placeholder="边框颜色" clearable />
  </main>
</template>

<script setup lang="ts">
import { useConfigStore } from '@renderer/stores'
import { storeToRefs } from 'pinia'

const { config } = storeToRefs(useConfigStore())

const devices = await navigator.mediaDevices.enumerateDevices()
const cameras = devices.filter((d) => d.kind.includes('video'))
console.log(cameras)
</script>

<style lang="scss" scoped>
main {
  background: var(--color-background);
}
</style>
